<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>员工信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="/js/vue.js"></script>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="employeeApp">
    <!--			查询表头-->
    <el-form :inline="true" class="demo-form-inline" >
        <el-form-item label="姓名">
            <el-input placeholder="请输入查询关键字" v-model="UserInfoParameter.userName"></el-input>
        </el-form-item>

        <el-form-item label="性别">
            <el-select v-model="UserInfoParameter.sex">
                <el-option label="男"  value="男"></el-option>
                <el-option label="女"  value="女"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item >
            <el-button type="success" @click="queryData" >查询</el-button>
            <el-button type="success" @click="reset">重置</el-button>
            <el-button type="success" @click="addUser">新增</el-button>
        </el-form-item>
    </el-form>
    <!--	table 标签-->

    <el-table border :data="list" style="width:100%">
        <!--		表示一列 循环输出标签的内容-->
        <el-table-column label="编号" prop="goodsId"></el-table-column>
        <el-table-column label="名称" prop="goodsName"></el-table-column>
        <el-table-column label="价格" prop="goodsPrice" ></el-table-column>
        <el-table-column label="生产厂家" prop="goodsFactory"></el-table-column>
        <el-table-column label="药材类型" prop="goodsType"></el-table-column>
        <el-table-column label="产地" prop="goodsArea"></el-table-column>
        <el-table-column label="简介" prop="goodsInfo"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" ></el-table-column>
        <el-table-column label="修改时间" prop="updateTime"></el-table-column>
        <!--		操作按钮-->
        <el-table-column label="操作" width="150px">
            <template slot-scope="x">
                <el-button type="warning" size="mini" @click="update(x.row)">修改</el-button>
                <el-button type="danger"  size="mini" @click="del(x.row)" >删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 修改- 对话框组件 -->
    <el-dialog :visible.sync="updateShow" width="50%" title="用户信息修改">
        <el-form label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="updateForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="updateForm.password"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="updateForm.age"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="updateForm.sex">
                    <el-option label="男"  value="男"></el-option>
                    <el-option label="女"  value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生日">
                <el-input v-model="updateForm.birth"></el-input>
            </el-form-item>
            <el-form-item label="学历">
                <el-select v-model="updateForm.edcation">
                    <el-option label="大专"  value="大专"></el-option>
                    <el-option label="本科"  value="本科"></el-option>
                    <el-option label="研究生"  value="研究生"></el-option>
                    <el-option label="博士"  value="博士"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="updateForm.section">
                    <el-option label="研发部"  value="研发部"></el-option>
                    <el-option label="技术部"  value="技术部"></el-option>
                    <el-option label="运营部"  value="运营部"></el-option>
                    <el-option label="销售部"  value="销售部"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职务">
                <el-select v-model="updateForm.job">
                    <el-option label="经理"  value="经理"></el-option>
                    <el-option label="管理"  value="管理"></el-option>
                    <el-option label="组长"  value="组长"></el-option>
                    <el-option label="员工"  value="员工"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="updateForm.email"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="updateForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="人员状态">
                <el-select v-model="updateForm.state">
                    <el-option label="在职"  value="经理"></el-option>
                    <el-option label="离职"  value="管理"></el-option>
                    <el-option label="兼职"  value="组长"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item >
                <el-button type="success" size="mini" @click="updateUser">修改</el-button>
                <el-button type="success" size="mini" @click="updateShow=false">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 新增- 对话框组件 -->
    <el-dialog :visible.sync="addShow" width="50%" title="新增用户信息">
        <el-form label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="addForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="addForm.password"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="addForm.age"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="addForm.sex">
                    <el-option label="男"  value="男"></el-option>
                    <el-option label="女"  value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生日">
                <el-input v-model="addForm.birth"></el-input>
            </el-form-item>
            <el-form-item label="学历">
                <el-select v-model="addForm.edcation">
                    <el-option label="大专"  value="大专"></el-option>
                    <el-option label="本科"  value="本科"></el-option>
                    <el-option label="研究生"  value="研究生"></el-option>
                    <el-option label="博士"  value="博士"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="addForm.section">
                    <el-option label="研发部"  value="研发部"></el-option>
                    <el-option label="技术部"  value="技术部"></el-option>
                    <el-option label="运营部"  value="运营部"></el-option>
                    <el-option label="销售部"  value="销售部"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职务">
                <el-select v-model="addForm.job">
                    <el-option label="经理"  value="经理"></el-option>
                    <el-option label="管理"  value="管理"></el-option>
                    <el-option label="组长"  value="组长"></el-option>
                    <el-option label="员工"  value="员工"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="addForm.email"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="addForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="人员状态">
                <el-select v-model="addForm.state">
                    <el-option label="在职"  value="经理"></el-option>
                    <el-option label="离职"  value="管理"></el-option>
                    <el-option label="兼职"  value="组长"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item >
                <el-button type="success" size="mini" @click="saveUser">新增</el-button>
                <el-button type="success" size="mini" @click="addShow=false">关闭</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</div>

</body>

<script>
    new Vue({
        el:"#employeeApp",// 绑定上面div中的id为MyApp的元素
        // 定义变量
        data:{//数据处理，
            UserInfoParameter:{//查询数据；创建对象，参数和后端命名相同
                userName:"",
                sex:""
            },
            list:[]

        },
        // 定义函数
        methods:{
            // 查询商品
            queryData(){
                //发送ajax请求，前后端交互技术
                const self = this;
                $.ajax({
                    url:"/goods/pageList",//访问的地址，因为访问项目时在一个项目，因此不用加http://localhost:8081
                    type:"post",//默认为get,可省略
                    data:this.UserInfoParameter,//请求参数，调试时输入的参数，也是上面书写的参数
                    success:function (rs) {//提示信息，成功访问后执行的函数 服务器正常、路径正常，将结果传给rs
                        console.log(rs);//控制台打印数据
                        if(rs.code == 200){
                            //给数组赋值，不能直接用this,因为返回值为list
                            self.list = rs.data;
                        }else{
                            self.list=[];//清空
                            alert(rs.msg);
                        }
                    },
                    error:function (rs) {
                        // 访问失败执行，可不写，一般用调试
                    }
                })
            }
        },

        // 生命周期函数。用于决定页面开始时，执行查询函数，也叫钩子函数，钩子，浏览器加载完html元素和Js、css后执行的函数
        mounted(){
            //运行查询函数
            this.queryData()//官方定义 var vv = new Vue(),但省略，this 可代替 vv
        }
    })
</script>

</html>